<template>
  <div class="app-container">
    <div class="title">{{ id !== ':id' ? '编辑' : '创建' }}管理员</div>
    <div class="form-area">
      <el-form ref="ruleForm" label-position="left" label-width="80px" :model="formLabelAlign" :rules="rules" >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formLabelAlign.username" placeholder="请输入用户名" :disabled="id !== ':id'"/>
        </el-form-item>
        <el-form-item label="姓名" prop="nickname">
          <el-input v-model="formLabelAlign.nickname" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item v-if="id === ':id'" label="密码" prop="password">
          <el-input v-model="formLabelAlign.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button v-if="id === ':id'" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
  name: 'AddAdmin',
  data() {
    return {
      formLabelAlign: {
        username: '',
        nickname: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      id: null
    }
  },
  created() {
    this.id = this.$route.params.id
    this.id !== ':id' && this.getUser()
  },
  methods: {
    async getUser() {
      const user = await this.$http.get(`/cms/admin/getOne/${this.id}`)
      console.log(user)
      const { username, nickname } = user.data
      this.formLabelAlign = { username, nickname }
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          if (this.id !== ':id') {
            const res = await this.$http.put(`/cms/admin/update/${this.formLabelAlign.username}`, { nickname: this.formLabelAlign.nickname })
            if (res.code === 0) {
              Message({
                message: res.message,
                type: 'success',
                duration: 2000
              })
              this.$router.push('/admin/index')
            }
          } else {
            const res = await this.$http.post('/cms/admin/reg', { ...this.formLabelAlign })
            if (res.code === 0) {
              Message({
                message: res.message,
                type: 'success',
                duration: 2000
              })
            }
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container {
    .title {
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(32, 160, 255, 0.08);
    }

    .form-area {
      width: 500px;
      margin-top: 20px;

      .create {
        width: 100%;
      }
    }
  }
</style>
